<template>
    <div class="memberinfo-layout" v-loading="loading">
        <div class="info-back  search-part">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="back-icon" @click="back">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </div>
                </el-col>
                <el-col :span="10" class="btns">
                    <!-- <el-button type="text" class="save red-btn" @click="onSubmit('formInfo')" v-if="!isSecond">
                        复 核
                    </el-button> -->
                    <div v-if="!isSecond">
                      <el-dropdown　@command="handleCommand">
                        <el-button type="primary">
                          　复　核
                          <i class="el-icon-caret-bottom el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown" >

                          <el-dropdown-item
                            v-for="(item, index) in organsItems"
                            :command="item.id"
                          >
                            {{item.name}}
                         </el-dropdown-item>

                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="member-info-title">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="复核信息" name="first">
                    <!--<keep-alive v-if="formInfo.name">-->
                    <div class="member-info-form">
                        <el-form
                          label-width="100px"
                          ref="formInfo"
                          :rules="formInfoRules"
                          :model="formInfo"
                        >
                          <el-form-item label="单号:" prop="sn">
                              <el-input v-model="formInfo.sn" :disabled="true"></el-input>
                          </el-form-item>
                          <el-form-item label="单据类型:" prop="btype">
                              <el-input v-model="formInfo.btype" :disabled="true"></el-input>
                          </el-form-item>
                          <el-form-item label="机构名称:" prop="oname">
                              <el-input v-model="formInfo.oname" :disabled="true"></el-input>
                          </el-form-item>
                          <!--<el-form-item label="经手人:" prop="hname">-->
                              <!--<el-input v-model="formInfo.hname" :disabled="true"></el-input>-->
                          <!--</el-form-item>-->
                          <el-form-item label="制单人:"  prop="uname" >
                              <el-input v-model="formInfo.uname" :disabled="true"></el-input>
                          </el-form-item>
                          <el-form-item label="创建日期:" prop="ctime">
                              <el-input v-model="formInfo.ctime" :disabled="true"></el-input>
                          </el-form-item>
                          <el-form-item label="备注:" prop="remark" class="member-mark">
                              <el-input type="textarea" v-model="formInfo.remark"　:disabled="true"></el-input>
                          </el-form-item>
                        </el-form>
                    </div>
                    <!--</keep-alive>-->
                </el-tab-pane>
                <el-tab-pane label="复核详情" name="second" v-if="activate">
                    <div class="memeber-manage-con" id="myDIV">
                        <waterfall
                                :line-gap="250"
                                :max-line-gap="360"
                                :min-line-gap="195"
                                :fixed-height="true"
                                :watch="items"
                                align="center"
                        >
                            <!-- each component is wrapped by a waterfall slot -->
                            <waterfall-slot
                                    v-for="(item, index) in items"
                                    :width="250"
                                    :height="185"
                                    :order="index"
                                    :key="item.id"
                            >
                                <div >
                                    <v-billcomp
                                            :item="item"
                                            :index="index"
                                            class="item"
                                            :isGoods="isGoods"
                                            :currentRadio ="currentRadio"
                                            :isMutpart="isMutpart"
                                            :backSelectItems="selectItems"
                                            :backItems="getCurrentSelectItems"
                                            :viewClick="function(){review(item)}"
                                            :buttonText="buttonText"
                                    >
                                        <div class="text">
                                          <h6 class="l1">{{item.name}}</h6>
                                          <!--<span class="l1"><span class="span1">单价</span>{{ Number(item.price || 0).toFixed(2) }}</span>-->
                                          <p><span class="span2">数量</span>{{ item.quantity }}</p>
                                          <!--<span><span class="span2">总金额</span>{{ Number(item.amount || 0).toFixed(2) }}</span>-->
                                          <p>
                                            <span class="span2">复核</span>
                                            <input type="number" class="text-number" :min="0" v-model="item.reviewQuantity" v-on:click.stop >
                                          </p>

                                        </div>

                                    </v-billcomp>
                                </div>
                            </waterfall-slot>

                        </waterfall>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import vSimpsearch from '../SimpSearch.vue';
    import * as type from '../../../store/types';
    import vBillcomp from '../../common/BillComp.vue';
    //    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    //    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import Waterfall from '../../common/waterfall/Waterfall.vue';
    import WaterfallSlot from '../../common/waterfall/waterfall-slot';
    export default {
        components: {
            vSimpsearch,vBillcomp,Waterfall, WaterfallSlot
        },
        data: function () {
            return {
                command: '',
                isSelected: false,
                loading: true,
                activeName: 'first',
                items: [],
                imageUrl: '',
                Actid: '',
                static_url: this.$cfg.static_url + "/",
                formInfo: {},
                formInfoRules: {
                },
                hasPic:true,
                actItem: '',
                isSecond: true,
                activate: false,
                isGoods: true,
                selectItems: [],
                currentRadio: {index:-1},
                isMutpart:true,
                page: 1,
                totalPage: 1,
                buttonText: '复核',
                organsItems: [],
            }
        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loadMore();
            }
        },
        mounted: function () {
            this.page = 1;
            this.totalPage = 1;
            this.actItem='';

            console.log("=============>mounted")
            this.$$("#content").scrollTop(0)
//            this.loadMore();
            let self = this;
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    console.log(12)
                    self.page++;
                    if (self.page > self.totalPage) {
                        return;
                    }
                    self.loadMore();
                    console.log('*(******************' + self.page)
                }
            });

            document.getElementById("myDIV").addEventListener('wheel', function (e) {
                if (e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0) {
                    console.log(e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0)
                    self.page++;
                    self.loadMore();
                }
            });

            this.$$(window).resize();

        },
        activated: function () {
            this.page = 1;
            this.totalPage = 1;
            this.$$("#content").scrollTop(0)
            this.selectItems = [];
            this.actItem='';
            this.$$(window).resize();
            this.isSecond=true;
            if (this.$route.params.item) {
              console.log(this.$route.params.item);
              this.formInfo = this.$route.params.item;
                this.formInfo.btype=this.convertBtype(this.formInfo.btype);
                this.activeName = 'first';
                this.activate = true;
                this.loadMore();
            }else{

            }

            if (this.$route.params.isBack) {
                this.isSecond = false;
                this.loadMore();
                this.activeName = 'second';
                console.log(this.activeName)
            }else{

            }
            let self=this;
            self.loading = true;
            this.$axioxs.get("/organ/?states=0,1")
                .then(function (res) {
                    console.log(res.data)
                    self.organsItems = res.data.records;
                    self.loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                    self.$message({
                        showClose: true,
                        type: 'error',
                        message: error
                    });
                });


        },
        methods: {
            convertBtype:function (typeV) {

                switch (typeV) {
                    case -3:
                        return '调拨出库';
                    case -2:
                        return '销售出库';
                    case -1:
                        return '普通出库';
                    case 1:
                        return '普通入库';
                    case 2:
                        return '采购入库';
                    case 3:
                        return '调拨入库';
                }

            },
            handleCommand(organId) {
              console.log(organId);

              if(this.isSelected == true){
                this.review(organId);
              }
              else {
                this.$message({
                    showClose: true,
                    type: 'error',
                    message: "请至少选择一个商品复核！"
                });
              }
            },
            loadMore() {
                console.log("==============>loadMore")
                console.log(this.totalPage)
                console.log(this.$route)
                 if (this.page <= this.totalPage) {
                  console.log("==================>12")
                    this.loading = true;
                    let self = this;
                    this.$axioxs.get('/store_bill/get-store-bill-entry/' + this.formInfo.id)
                        .then(function (res) {
                          console.log(res.data)
                            self.totalPage = res.data.totalPage;
                            self.actItem = res.data.records;
                            self.actItem.forEach(item => {
                                item.height = 265;
                                item.width = 300;
                                self.items.push(item);
                            });
                            self.loading = false;
                        })
                        .catch(function (error) {
                            console.log(error);
                            self.$message({
                                showClose: true,
                                type: 'error',
                                message: error,
                                onClose:function () {
                                    self.loading = false;
                                }
                            });
                        });
                 }
                 else {
                   console.log("============>123")
                 }
            },
            handleClick(tab, event) {
                if (this.activeName == 'first') {
                    this.isSecond = true;
                }
                else if (this.activeName == 'second') {
                    this.$$(window).resize();

                    if(this.$route.params.item.btype == "调拨出库"||this.$route.params.item.btype == "调拨入库"){
                        this.isSecond = true;
                    }else{
                        this.isSecond = false;
                    }
                    this.totalPage=1;
                    this.items=[];
                    this.loadMore();
                }
            },
            review:function (arg) {

                let entryIds = [];
                let organId = '';
                let numbers = [];
                let isReturn = false;
                if(typeof(arg) == "object"){  //所选择的是单个商品分录
                  console.log("object");
                  entryIds.push(arg.id);
//                  organId = this.organsItems[0].parentId;

                  organId = this.formInfo.oid;
                    if(arg.quantity==0){
                        this.$message({
                            showClose: true,
                            type: 'error',
                            message: "数量为0，不能复核"
                        });
                        isReturn = true;
                    }else if(parseInt(arg.quantity)<parseInt(arg.reviewQuantity)){
                        this.$message({
                            showClose: true,
                            type: 'error',
                            message: "大于数量，不能复核"
                        });
                        isReturn = true;
                    }else if(arg.reviewQuantity){
                    numbers.push(Number(arg.reviewQuantity));
                  }
                  else {
                    this.$message({
                        showClose: true,
                        type: 'warning',
                        message: "请输入复核数量！"
                    });
                    isReturn = true;
                  }

                }
                else if(typeof(arg) == "string"){　//所选择的是机构
                  console.log("string");
                  console.log(this.selectItems)
                    console.log(arg)
                  if(this.selectItems.length != 0){
                    this.selectItems.forEach(item => {
                      if(item.quantity==0){
                          this.$message({
                              showClose: true,
                              type: 'error',
                              message: "数量为0，不能复核"
                          });
                          isReturn = true;
                      }else if(parseInt(item.quantity)<parseInt(item.reviewQuantity)){
                          this.$message({
                              showClose: true,
                              type: 'error',
                              message: "大于数量，不能复核"
                          });
                          isReturn = true;
                      }else if(item.reviewQuantity){
                        entryIds.push(item.id);
                        numbers.push(Number(item.reviewQuantity));
                      }
                      else {
                        this.$message({
                            showClose: true,
                            type: 'warning',
                            message: "请输入复核数量！"
                        });

                        isReturn = true;
                      }



                    });
                  }
                  else {
                    this.$message({
                        showClose: true,
                        type: 'warning',
                        message: "请至少选择一个商品复核！"
                    });
                    isReturn = true;
                  }

                  organId = arg;
                  console.log(organId);

                }


                if(isReturn == true){
                  return;
                }

                console.log("--------------------------------" + organId)

                let type = this.formInfo.btype;
                console.log(type)
                let arrow = 1;
                if(type.indexOf("入") !=-1 ){
                  arrow = 1;
                }
                else if(type.indexOf("出") !=-1){
                  arrow = 2;
                }

                var args = {
                  entryIds: entryIds.join(","),
                  storeId: organId,
                  numbers: numbers.join(","),
                  arrow: arrow
                };
                console.log(args);
                let self = this;
                this.$axioxs.post('/store_bill/execute/', this.$qs.stringify(args))
                    .then(function (res) {
                      console.log(res.data)
                        self.loading = false;
                        self.$message({
                            showClose: true,
                            type: 'info',
                            message: '复核成功'
                        });

                        self.loadMore();
                        self.selectItems = [];
                        self.items=[];
                    })
                    .catch(function (error) {
                        console.log(error);
                        self.$message({
                            showClose: true,
                            type: 'error',
                            message: error
                        });
                    });
            },

            getCurrentSelectItems: function (items) {
                console.log("==================>")
                console.log(items);
                this.isSelected = true;
            },
            back: function () {
                this.$store.commit(type.CHANGE_INDEX, '/review');
                this.$router.push({
                    path: '/review'
                });
            }
        }
    }
</script>

<style scoped>


    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .close-del {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .close-fa-circle {
        font-size: 1.25em;
    }
    .member-info-title {
        padding-top: 60px;
    }

    .member-info-form {
        width: 90%;
        padding-top: 0px;
        margin: 0 auto;
    }

    .img {
        width: 80px;
        height: 80px;
        margin: 10px auto;
    }
    #myDIV{
        margin: 0px 20px;
    }
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }


    .text {
        margin-bottom: 1em;
    }

    .text h6 {
        margin-bottom: 5px;
    }

    .span1 {
        background-color: #3eb3f9;
        border-radius: 20px;
        padding: 2px 5px;
        color: #fff !important;
        font-size: .8em;
        margin-right: 3px;
    }

    .span2 {
        background-color: #6699ff;
        border-radius: 20px;
        padding: 2px 5px;
        color: #fff !important;
        font-size: .8em;
        margin-right: 3px;
    }

    .remark {
        padding: 3px 0;
    }
    .text-number{
        width: 60%;
        height: 27px;
        border: 1px solid #cacaca;
        border-radius: 3px;
    }
    .text-numspan{
        display: block;
    }
    .quantity-h{
        height:30px;
        line-height: 30px;
    }
    .card-storage{
        height:220px;
        padding: 4em 0!important;
    }
</style>
